<template>
  <div>
    <top />
    <div class="main">
      <div  class="link_category">
        <router-link  to="/home" style="text-decoration: none;">Return to</router-link> 
      </div>
      <el-card shadow="hover" class="card_category">  
        <el-container>
            <el-header>
              <p class="text0" style="font-size:30px;padding-left:55px;">{{ sessionScope.product.name }}</p>
            </el-header>
            <el-main class="productList">
                <el-table :data="sessionScope.productList" style="width: 1000px; height:250px;font-size:20px">
                    <el-table-column prop="productId" label="Product ID" width="200px">
                      <template slot-scope="scope">
                        <a :href="`productForm?productId=${scope.row.productId}`">{{ scope.row.productId }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="Name" width="200px">
                    </el-table-column>
                </el-table>
            </el-main>
         </el-container>
       </el-card>
    </div>
    <bottom />
  </div>
</template>

<script>
import top from '../../components/Top.vue'
import bottom from '../../components/Bottom.vue'

export default {
  components: {top , bottom },
    name:   'Category',
    data() {
      return {
        sessionScope: {
          product: {
            name: 'Birds' // 这里模拟 sessionScope.product.name 的值
          },
        productList: [{
            productId: 'AV-CB-01',
            name:'Amazon Parrot'
          }
          ]
        }
    }
  },
  methods:{
    redirectToProductForm() {
    // 构建跳转链接
    const url = `/`;
    // 执行页面跳转
    window.location.href = url;
  }
  }
}
</script>

<style scoped>
.main{
  text-align: center;
}
.link_category{
  font-size: 20px;
  text-align: left;
  padding-left: 200px;
  padding-top: 80px;
}
.card_category{
  width:60%;
  height:300px;
  margin-left: 20%;
  margin-top: 50px;
}
.productList{
  margin-top: 30px;
  padding-left: 270px;
}
</style>